<template>
  <div class="mine">
    <!-- title -->
    <div class="title">
      <span>饿了么</span>
      <span>。。。</span>
    </div>
    <!-- 个人信息 -->
    <div class="myheader">
      <div class="text">
        <div class="header_img" >
          <img :src="userinfo.avatarUrl" alt="">
        </div>
        <div class="name">
          <div>{{userinfo.id}}</div>
          <div>{{userinfo.phone|phoneFilter}}</div>
        </div>
      </div>
      <div class="acount_set">账户设置</div>
    </div>
    <!-- l蓝色背景图-->
    <div class="version_car">
      <img :src="car" alt="">
    </div>
    <!-- 红包 -->
    <div class="red_packed">
      <div class="one">
        <div>红包</div>
        <div>7张今日到期</div>
      </div>
      <div class="two">
        <div>余额</div>
        <div>0元</div>
      </div>
    </div>
    <!-- 常用工具 -->
    <div class="block">
      <div class="title">常用工具</div>
      <div class="list">
        <div class="btn">
          <van-icon name="location-o" @click="toMySite" size="24" />
          <span>我的地址</span>
        </div>
        <div class="btn">
          <van-icon name="phone-circle-o"  size="24"/>
          <span>我的客服</span>
        </div>
        <div class="btn" @click="toCollect"> 
          <van-icon name="like-o"  size="24"/>
          <span>店铺关注</span>
        </div>
        <div class="btn">
          <van-icon name="star-o"  size="24"/>
          <span>评价有礼</span>
        </div>
      </div>
    </div>
    <!-- 要求好友赚现金 -->
    <div class="car">
      <div class="car_one">
        <div>邀请好友赚现金</div>
        <div>最高得15元</div>
        <div>
          <img :src="car2" alt="">
        </div>
      </div>
      <div class="car_one">
        <div >饿了么服务号</div>
        <div>关注后即使接收系统通知</div>
        <div>
          <img :src="car3" alt="">
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import car from '../../assets/1.png'
import car2 from '../../assets/2.png'
import car3 from '../../assets/3.png'
export default {
    data(){
      return{
        car:car,
        car2:car2,
        car3:car3,
        userinfo:JSON.parse(localStorage.getItem('userinfo'))
      }
    },
    methods:{
    toCollect(){ //跳转到我的收藏
      this.$router.push('/collect');
    },
    toMySite(){ //跳转到我的地址
      this.$router.push('/mysite')
    }
  },
  filters:{ //过滤手机号码
    phoneFilter(phone){
      return phone.slice(0,3)+"****"+phone.slice(-4);
    }
  }
}
</script>

<style lang="scss" scoped>
.mine{
  background-color: #f5f5f5;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.title{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  margin-top: 15px;
  font-weight: bold;
}
.myheader{
  width: 100%;
  display: flex;
  margin-top: 10px; ;
  justify-content: space-between;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  .text{
    display: flex;
    .header_img{
      width: 50px;
      height: 50px;
      background: #999;
      border-radius: 50%;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    .name{
      padding-top: 8px;
      div:nth-child(2){
        font-size: 14px;
        color: #999;
        margin-top: 5px;
      }
    }
  }
  .acount_set{
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 14px;
    border-radius: 15px;
    box-sizing: border-box;
  }
}
.version_car{
  width: 94%;
  margin: auto;
  border-radius: 5px;
  img{
    width: 100%;
  }
}
.red_packed{
  width: 94%;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  background: white;
  margin: 10px auto;
  .one{
    text-align: center;
    font-weight: bold;
    div:nth-child(2){
      font-size: 12px;
      color: #999;
      font-weight: 100;
      margin-top: 5px;
    }
  }
  .two{
    text-align: center;
    font-weight: bold;
    div:nth-child(2){
      font-size: 12px;
      color: #999;
      font-weight: 100;
      margin-top: 5px;
    }
  }
}
.block{
  margin: 10px;
  background-color: white;
  .title{
    font-weight: bold;
    padding-left: 10px;
  }
  .list{
    display: flex;
    justify-content: space-around;
    align-content: center;
    .btn{
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      i{
        margin-bottom: 10px;
      }
    }
  }
}
.car{
  width: 94%;
  margin: auto;
  display: flex;
  
  justify-content: space-between;
  .car_one{
    width: 48%;
    background: white;
    height: 150px;
    div:nth-child(1){
      font-weight: bold;
      text-align: center;
    }
    div:nth-child(2){
      font-size: 14px;
      color: #999;
      text-align: center;
      margin-top: 5px;
    }
    div:nth-child(3){
     width: 160px;
     height: 80px;
     line-height: 100px;
     margin:30px auto 0;
     text-align: center;
     background: #f5f5f5;
     border-radius: 5px;
    }
  }
}
</style>